<template>
	<view class="u-page">
		<u-navbar title="时空穿越" safeAreaInsetTop fixed placeholder :autoBack="true" @leftClick="xxxx()">
		</u-navbar>
		<u-gap :height="20"></u-gap>
		<view style="display: flex;flex-direction: column;" :height="vxheight">
			<view class="u-flex u-flex-xy-center" @click="ck()">
				{{city}}
			</view>
			<u-gap :height="10"></u-gap>

			<view style="display: flex;flex-direction: column;">
				<u-search v-model="text" :customStyle="{color:'rgba(200,200,200,255)'}"
					:actionStyle="{color:'rgba(200,200,200,200)',fontWeight:'bold'}" bgColor="rgba(100,100,100,188)"
					color="rgba(200,200,200,255)" @search="xs()" placeholder="输入地址找找" @change="c()" :animation="true"
					@custom="xs()">
				</u-search>
				<view style="clear:both; height:0; overflow:hidden;" v-if="sr==true">
					<view style="z-index: 1;position: absolute;" class="z">
						<u-list style="height: 100%;">
							<u-list-item v-for="(item, index) in sug" :key="index" style="margin-top: 20rpx;">
								<u-gap :height="5"></u-gap>
								<view @click="xx(item)" style="display: flex;justify-content: space-around;">
									{{item.title}}
								</view>
								<u-gap :height="5"></u-gap>
							</u-list-item>
						</u-list>
					</view>
				</view>
			</view>
			<u-gap :height="10"></u-gap>
			<map id="map" style="width: 100%;" :show-location="true" :latitude="latitude" :longitude="longitude"></map>
			<u-gap :height="20"></u-gap>
			<u-list>
				<u-list-item v-for="(item, index) in poisList" :key="index">
					<view @click="xxx(item)">
						<u-gap :height="10"></u-gap>
						<view style="display: flex;justify-content: space-around;">
							‣{{item.title}}
						</view>
						<u-gap :height="10"></u-gap>
						<u-line color="#55557f"></u-line>
					</view>
				</u-list-item>
			</u-list>
		</view>
	</view>
</template>

<script>
	import qqmapsdk from "../../common/qqmap-wx-jssdk.min.js"
	export default {
		components: {},
		data() {
			return {
				img: "http://file.wekids.group/avatar.png",
				longitude: 0,
				latitude: 0,
				poisList: [],
				vxbottom: 0,
				vxheight: 30,
				text: '',
				sug: [],
				sr: false,
				city: "深圳市",
				dj: false,
				map: null,
				fh: false
			}
		},
		mounted() {
			// #ifdef MP-WEIXIN
			this.getCity();
			// #endif
		},
		methods: {
			xxxx() {
				this.$store.commit("clickicon", 0)
				// 在C页面内 navigateBack，将返回A页面
				uni.reLaunch({
					url: '../waimai/waimai'
				})
			},
			xxx(item) {
				this.text = item.title
				this.latitude = item.location.lat
				this.longitude = item.location.lng
				this.mapget()
				this.sr = false
				this.dj = true
			},
			xx(item) {
				this.text = item.title
				this.latitude = item.latitude
				this.longitude = item.longitude
				this.mapget()
				this.sr = false
				this.dj = true
			},
			xs() {
				this.text = this.sug[0].title
				this.latitude = this.sug[0].latitude
				this.longitude = this.sug[0].longitude
				this.mapget()
				this.sr = false
				this.dj = true
			},
			mapget() {
				var that = this

				const QQMap = new qqmapsdk({
					key: "KKHBZ-FEKKK-XWUJB-A64ZX-R5XBQ-RVBFP"
				})

				uni.getLocation({
					type: 'gcj02',
					success: function(res) {

						that.map.moveToLocation({
							longitude: that.longitude,
							latitude: that.latitude,
							success: function(res) {

								console.log('当前位置的经度：' + that.longitude);
								console.log('当前位置的纬度：' + that.latitude);

								uni.showToast({
									title: '选择位置成功',
									duration: 1500,
									icon: "none"
								})
								if (that.fh == true) {
									that.fh = false
								} else {
									setTimeout(() => { //若不能生成波纹请把setTimeout的注释打开
										getApp().globalData.address = that.text
										getApp().globalData.selectp = true
										getApp().globalData.longitude = that.longitude
										getApp().globalData.latitude = that.latitude
										that.$store.commit("clickicon", 0)
										// 在C页面内 navigateBack，将返回A页面
										uni.reLaunch({
											url: '../waimai/waimai'
										})
									}, 1500)
									that.fh = true
								}

							}
						})
						// that.latitude = res.latitude
						// that.longitude = res.longitude
						QQMap.reverseGeocoder({
							
							location: {
								latitude: that.latitude,
								longitude: that.longitude
							},
							success: (res) => {
								//定位成功
								that.city = res.result.address_component.city
								let location = [that.latitude, that.longitude]
								let stringLocation = location.toString()
								uni.request({
									url: "https://apis.map.qq.com/ws/geocoder/v1/",
									data: {
										location: stringLocation,
										key: "KKHBZ-FEKKK-XWUJB-A64ZX-R5XBQ-RVBFP",
										get_poi: 1
									},
									success: (res => {
										that.poisList = res.data.result.pois
									})
								})
							},
							fail: function(res) {
								uni.showToast({
									title: '定位失败',
									duration: 2000,
									icon: "none"
								})
							}
						})
					}
				});
			},
			c() {
				var that = this
				if (that.dj == true) {
					that.dj = false
				} else {
					if (that.text == "") {

					} else {
						const QQMap = new qqmapsdk({
							key: "KKHBZ-FEKKK-XWUJB-A64ZX-R5XBQ-RVBFP"
						})
						that.sr = true
						QQMap.getSuggestion({
							
							//获取输入框值并设置keyword参数
							keyword: that.text, //用户输入的关键词，可设置固定值,如keyword:'KFC'
							region: that.city, //设置城市名，限制关键词所示的地域范围，非必填参数
							success: function(res) { //搜索成功后的回调

								var sug = [];
								for (var i = 0; i < res.data.length; i++) {
									sug.push({ // 获取返回结果，放到sug数组中
										title: res.data[i].title,
										id: res.data[i].id,
										addr: res.data[i].address,
										city: res.data[i].city,
										district: res.data[i].district,
										latitude: res.data[i].location.lat,
										longitude: res.data[i].location.lng
									});
								}
								that.sug = sug
							},
							fail: function(error) {
								console.error(error);
							},
							complete: function(res) {
								console.log(res);
							}
						});
					}
				}
			}
		},
		created() {
			var that = this
			// #ifdef MP-WEIXIN
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.vxbottom = menuButtonInfo.bottom
			this.vxheight = menuButtonInfo.height
			// #endif
		},
		onReady() {
			this.map = uni.createMapContext("map", this);
			var that = this

			const QQMap = new qqmapsdk({
				key: "KKHBZ-FEKKK-XWUJB-A64ZX-R5XBQ-RVBFP"
			})

			uni.getLocation({
				type: 'gcj02',
				success: function(res) {

					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);

					that.latitude = res.latitude
					that.longitude = res.longitude
					QQMap.reverseGeocoder({
						
						location: {
							latitude: that.latitude,
							longitude: that.longitude
						},
						get_poi: 1,
						success: (res) => {
							//定位成功
							that.poisList = res.result.pois
							that.city = res.result.address_component.city
						},
						fail: function(res) {
							uni.showToast({
								title: '定位失败',
								duration: 2000,
								icon: "none"
							})
						}
					})
				}
			});
		}
	}
</script>

<style>
	.content {
		flex: 1;
	}

	.map {
		flex: 1;
	}

	.z {
		background: linear-gradient(180deg, #141211, #bca898 170%);
		border-radius: 0 0 8px 8px;
	}
</style>
